<template>
  <el-empty description="暂无数据，请联系管理员添加系统" v-if="!systems.length" />
  <el-row :gutter="30" v-else>
    <el-col
        v-for="item in systems"
        :key="item.sys_id"
        :span="3"
    >
      <el-card :body-style="{ padding: '0px' }" shadow="hover">
<!--        <img-->
<!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
<!--            class="image"-->
<!--        />-->
        <template #header>
          <div class="card-header">
            <span>{{ item.sys_name }}</span>
          </div>
        </template>
        <div class="system-name">
          <span>{{ item.sys_name }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getSystemList } from '@a/system';

let systems = ref([]);

onMounted(() => {
  getSystemList()
      .then(response => {
        systems.value = response.data;
      })
      .catch(error => {
        console.log(error)
      })
})
</script>

<style scoped>
.el-card{
  margin-bottom: 20px;
  border-radius: 5px;
}

.card-header {
  width: 100px;
  height: 100px;
}

.system-name {
  padding: 14px;
  text-align: center;
}
</style>